<template>
	<div class="app-container">
		<div class="m-content-box">
			<div class="normal-content">
				<div class="contract-recharge__hd">
					<div class="contract-recharge__residue">
						您当前电子合同剩余可签署：<strong>{{contract_num}}</strong> 份
					</div>
					<div class="recharge-link cuPo"
						@click.stop="tiaozhuan('/contract/contractRechargeRecord?nums='+contract_num)">充值记录</div>
				</div>
				<div class="contract-packages">
					<div class="contract-package border-box" v-for="(item, index) in list" :key="index">
						<div class="contract-package__hd"></div>
						<div class="contract-package__title">{{item.name}}</div>
						<div class="contract-package__price">
							<span class="contract-package__unit">¥</span>
							<span class="actual-sale-price">{{item.price}}</span>元 / {{item.contract_num}}份
						</div>
						<div class="contract-package__btn" @click="pay(item)">立即购买</div>
					</div>
				</div>
				<div class="business-contacts">
					<h3 class="business-contacts__title">联系商务</h3>
					<div class="business">
						<div class="border-box business-item" v-for="(item, index) in commercia" :key="index">
							<img src="https://img.keepyoga.com/assets/img_cloud/contract/saler-icon.svg" alt=""
								class="business-item__icon">
							<div class="business-item__sales-info">
								<div class="business-item__saler-name">{{item.name}}</div>
								<div class="business-item__saler-phone">{{item.mobile}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="is_show" class="zhezhao wh100"></div>
		<div v-if="is_show" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 962px;">
				<div class="dialog-content">
					<div class="dialog-content-header">
						<span class="dialog-title">充值</span>
						<span class="dialog-close js-dialog_close" @click="guanbiShow()" />
					</div>
					<div class="dialog-content-main">
				
						<div class="dynamic-fields-wrap">
							<h3 class="dynamic-fields__title">订单信息</h3>
							<div class="dynamic-fields">
								<div class="dynamic-field span6 border-right">
									<div class="dynamic-field__label">合同份数（份）</div>
									<div class="dynamic-field__val">{{ ht_num }}</div>
								</div>
								<div class="dynamic-field span6">
									<div class="dynamic-field__label">应付金额（元）</div>
									<div class="dynamic-field__val">{{ ht_money }}</div>
								</div>
							</div>
						</div>
						<div class="dynamic-fields-wrap space-mt20">
							<h3 class="dynamic-fields__title">微信支付</h3>
							<div class="contract-pay-box">
								<div class="contract-pay__tips">请使用微信扫描二维码支付，二维码有限时间<var>180</var>秒，过期后请重新刷新二维码</div>
								<div class="contract-pay__qrcode-box">
									<img :src="qrcode" class="wh100">
									<!-- <div>支付成功</div> -->
								</div>
							</div>
						</div>
					</div>
					<div class="dialog-content-footer">
						<el-button class="bac6b7" type="primary" @click="guanbiShow()">关闭</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getSetMenu,
		getPayQrcode,
		getPayinfo
	} from '@/api/contract'
	export default {
		name: 'contractRecharge',
		components: {},
		data() {
			return {
				is_show: false,
				ht_num: 0,
				ht_money: 0,
				contract_num: 0,
				list: [],
				commercia: [],
				qrcode: '',
				orderid: '',
				timer: null,
				payok: false
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '充值',
				url: '/contract/contractRecharge',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		beforeDestroy() {
		    clearTimeout(this.timer);
		},
		methods: {
			tiaozhuan(url){
				this.$router.push({
					path: url
				})
			},
			getList() {
				getSetMenu({}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.contract_num = data.contract_num
					this.commercia = data.commercia
					this.list = data.setmenu
				}).catch(error => {
					console.log(error)
				})
			},
			pay(item) {
				var that =this
				var papem = {
					'id': item.id
				}
				getPayQrcode(papem).then(response => {
					const {
						data
					} = response
					console.log(data)
					that.ht_num = item.contract_num
					that.ht_money = item.price
					that.qrcode = data.payewm
					that.orderid = data.orderid
					that.timer = setInterval(function() {
						that.getPayinfo()
					}, 2000)
					that.is_show = true
				}).catch(error => {
					console.log(error)
				})
			},
			getPayinfo() {
				var that =this
				var data = {
					orderid: that.orderid
				}
				getPayinfo(data).then(response => {
					const {
						data
					} = response
					if(data === 1){
						that.$message.success('支付成功');
						clearTimeout(that.timer);
						that.is_show = false
						that.getList()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			guanbiShow(){
				this.is_show = false
				clearTimeout(this.timer);
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
	.m-content-box {
		position: relative;
		padding: 30px 63px;
	}

	.normal-content {
		position: relative;
		width: 840px;
		margin: 0 auto;
	}

	.contract-recharge__hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60px;
	}

	.contract-packages {
		display: flex;
		justify-content: space-between;
	}

	.contract-recharge__residue {
		font-size: 16px;
		height: 24px;
		line-height: 24px;
	}

	.recharge-link {
		color: #6b7cdd;
	}

	.recharge-link>img {
		vertical-align: bottom;
		margin-right: 3px;
	}

	.contract-package {
		margin-bottom: 60px;
		width: 258px;
		height: 236px;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 2px 6px 5px rgba(242, 242, 242, .5);
	}

	.border-box {
		box-sizing: border-box;
	}

	.contract-package__hd {
		width: 258px;
		height: 12px;
		background: #41c3a8;
		border-radius: 10px 10px 0 0;
	}

	.contract-package__title {
		margin-top: 30px;
		padding: 0 30px;
		font-size: 18px;
		line-height: 1;
		font-weight: 700;
	}

	.contract-package__price {
		margin-top: 38px;
		padding: 0 30px;
		line-height: 1;
		display: flex;
		align-items: baseline;
	}

	.contract-package__btn {
		margin: 40px auto 0;
		width: 210px;
		height: 34px;
		background: #f5934b;
		border-radius: 20px;
		text-align: center;
		line-height: 34px;
		color: #ffffff;
		cursor: pointer;
	}

	.contract-package__unit {
		font-size: 18px;
		font-weight: 700;
	}

	.actual-sale-price {
		margin: 0 3px;
		font-size: 24px;
		font-weight: 700;
	}

	.business-contacts__title {
		margin-bottom: 6px;
		font-size: 16px;
	}

	.business {
		display: flex;
	}

	.business-item:not(:last-child) {
		margin-right: 32px;
	}

	.business-item__sales-info {
		line-height: 1;
	}

	.business-item__saler-name {
		margin-bottom: 8px;
	}

	.business-item__saler-phone {
		color: #f5934b;
	}

	.business-item:not(:last-child) {
		margin-right: 32px;
	}

	.contract-recharge__residue>strong {
		font-size: 24px;
		font-weight: 700;
		color: #f5934b;
		vertical-align: bottom;
	}

	.business-item {
		display: flex;
		align-items: center;
		width: 258px;
		height: 64px;
		padding-left: 20px;
		background: #ffffff;
		border-radius: 8px;
		border: 1px solid #e0dfe4;
	}

	.business-item__icon {
		margin-right: 12px;
	}

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.m-dialog-box {
		position: absolute;
		width: 962px;
		left: 50%;
		top: 50%;
		margin-left: -480px;
		z-index: 1200;
		opacity: 0;
		transition: all .2s ease-in-out;
	}

	.fade-in {
		opacity: 1;
	}

	.dialog-content {
		background: #ffffff;
		border-radius: 10px;
	}

	.dialog-content .dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-content .dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content .dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.dialog-content .dialog-content-header .dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.dynamic-fields-wrap {
		position: relative;
	}

	.dynamic-fields-wrap {
		position: relative;
	}

	.space-mt20 {
		margin-top: 20px;
	}

	.dynamic-fields__title {
		height: 22px;
		font-size: 12px;
		font-weight: 400;
		color: #787878;
	}

	.dynamic-fields {
		display: flex;
		flex-wrap: wrap;
	}

	.dynamic-field.span6 {
		width: 50%;
	}

	.dynamic-field.border-right {
		border-right: 2px solid #ffffff;
	}

	.dynamic-field {
		display: flex;
		align-items: center;
		padding: 5px 15px;
		margin-bottom: 2px;
		min-height: 42px;
		line-height: 32px;
		background: #f2f2f2;
		box-sizing: border-box;
	}

	.dynamic-field__label {
		padding-right: 10px;
	}

	.dynamic-field__val {
		flex: 1;
		text-align: right;
	}

	.contract-pay-box {
		padding: 24px;
		background: #f2f2f2;
	}

	.contract-pay__tips {
		text-align: center;
	}

	.contract-pay__qrcode-box {
		width: 200px;
		height: 200px;
		overflow: hidden;
		margin: 30px auto 0;
		background: #ffffff;
	}
</style>